<template>
  <Table :columns="column" :data="data" ref="c-table">
    <template #title="{ row }">{{ row.title }}</template>
  </Table>
  <ul class="mySortableTest">
    <li data-id="1">order</li>
    <li data-id="2">save</li>
    <li data-id="3">restore</li>
  </ul>
  <Row>
    <Button type="default" @click="add">操作</Button>
    <Button type="default" @click="destroy">销毁</Button>
  </Row>
</template>
<script>
// Default SortableJS
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      column: [
        {
          title: '栏目1',
          key: 'title',
          slot: 'title'
        }
      ],
      data: [
        {
          title: '数据1'
        },
        {
          title: '数据2'
        }
      ]
    }
  },
  methods: {
    onExpand(row) {
      console.log(row)
    },
    add() {
      const list = this.sortable.toArray()
      this.sortable.sort(list.reverse(), true)
    },
    destroy() {
      this.sortable.destroy()
    }
  },
  mounted() {
    const tbody = this.$refs['c-table'].$el.querySelector('.ivu-table-tbody')
    let sortable = Sortable.create(tbody, {
      animation: 300, // ms, animation speed moving items when sorting, `0` — without animation
      onStart(e) {
        console.log(`onStart`)
        console.log(e)
        let body = e.item.closest('.ivu-table-body')
        console.log(body)
        return false
      },
      onMove(e) {
        return false
      },
      onEnd() {}
    })

    const mySortableTest = document.querySelector('.mySortableTest')

    this.sortable = Sortable.create(mySortableTest, {
      group: 'localStorage-example',
      store: {
        /**
         * Get the order of elements. Called once during initialization.
         * @param   {Sortable}  sortable
         * @returns {Array}
         */
        get: function (sortable) {
          var order = localStorage.getItem(sortable.options.group.name)
          return order ? order.split('|') : []
        },

        /**
         * Save the order of elements. Called onEnd (when the item is dropped).
         * @param {Sortable}  sortable
         */
        set: function (sortable) {
          var order = sortable.toArray()
          localStorage.setItem(sortable.options.group.name, order.join('|'))
        }
      }
    })
  }
}
</script>
<style lang="scss" scoped></style>
